<style type="text/css">
    #e321 .exc {
        width: 637px;
    }
</style>

<!--EXCURSIONS ONLINE BOOKING-->
<div id="e321">
    <div class="excursions">

        <h1 class="franklin_gothic_metium_cond">Online Booking :: Excursions</h1>

        <br />

        <form action="<?=base_url('client/book_now')?>" method="post" name="customer" id="customer">

            <input type="hidden" value="<?=$booking_info->excid?>" name="excid" />
            <input type="hidden" value="<?=$booking_info->noadult?>" name="noadult" />
            <input type="hidden" value="<?=$booking_info->noch?>" name="noch" />
            <input type="hidden" value="<?=$booking_info->persons?>" name="persons" />
            <input type="hidden" value="<?=$booking_info->adultprice?>" name="adultprice" />
            <input type="hidden" value="<?=$booking_info->chprice?>" name="chprice" />
            <input type="hidden" value="<?=$booking_info->totalprice?>" name="totalprice" />
            <input type="hidden" value="<?=$booking_info->date?>" name="date" />
            <input type="hidden" value="Localhost" name="s_b_i" />


            <div class="box" style="background: none;box-shadow: none;height: 148px;padding: 8px;width: 222px; border: 0;"><img alt="IT Montenengro" src="<?=base_url()?>assets/img/logo-customer.png" /></div>
            <div class="exc">
                <div class="top_spacer"></div>
                <div class="top_border"></div>

                <!--ATLAS-->
                <div class="atlas_content_title">
                    <div class="atlas_content_title_inner">                

                        <div class="product_price" style="width:140px; color: #FFF; margin-top: 75px;">
                            <span class="title">Current cart total</span>
                            <span>EUR</span>      <br>
                            <span class="price"><em>&euro; <?=$booking_info->totalprice?><span></span></em></span>
                        </div>

                        <div class="atlas_content_intro">
                            <h1>Customer Information</h1>                                

                            <div id="atlas_list">
                                <ul>
                                    <li><span>Number of adults: <?=$booking_info->noadult?></span></li>
                                    <li><span>Number of Childres: <?=$booking_info->noch?></span></li>
                                    <li><span>Total price: EUR &euro; <?=$booking_info->totalprice?></span></li>
                                </ul>
                            </div>                     
                        </div>        

                        <br class="clearing" />

                    </div>
                </div> 

                <!--CHECK OUT CUSTOMER-->

                <!--CHECK OUT CUSTOMER-->
                <div class="check_out">

                    <? if(isset($booking_msg)): ?>
                        <br />
                        <div class="error" style="margin-left:10px;margin-right:10px;">
                            <p style="padding: 10px; line-height: 19px;"><?=$booking_msg?></p>
                        </div>

                        <? endif; ?>

                    <!--TRAVELER DETAILS-->
                    <div class="traveler_details">
                        <h2>Traveler details</h2>
                        <div id="infomessage" style="display: none;"></div>
                        <p class="label_header">                           
                            <label class="traveler_title" for="traveler_title">Title</label>
                            <label class="traveler_firstname" for="traveler_firstname">First Name</label>
                            <label class="traveler_lastname" for="traveler_lastname">Last Name</label>
                        </p>
                        <div class="traveler_list">
                            <!-- do adults first -->                              
                            <? for ($i=1; $i<=$booking_info->noadult; $i++){?>                   
                                <p class="alt" <? if ($i==1)echo 'style="border-top:1px dotted #f5c79f;"'?>>  <!--STYLE FIX :)-->
                                    <span class="traveler_index">
                                        <label class="required" for="traveler_firstname<?=$i;?>>" style="<? if($i!=1)echo 'background:none'; ?>">
                                            <em>*</em> Traveler <?=$i;?> (Adult)
                                        </label>                                        
                                    </span>
                                    <select name="a_title[]" id="a_title<?=$i;?>" class="traveler_title">                                    
                                        <option value="Mr">Mr</option>                                   
                                        <option value="Mrs">Mrs</option>                           
                                        <option value="Ms">Ms</option>                              
                                        <option value="Miss">Miss</option>                                
                                        <option value="Mstr">Mstr</option>                            
                                    </select>
                                    <input type="text"  name="a_firstName[]" maxlength="30" class="traveler_firstname iconname" id="a_firstName<?=$i;?>" value="" />
                                    <input type="text"  name="a_lastName[]" maxlength="30" class="traveler_firstname pad_text_left" id="a_lastName<?=$i;?>" value="" />
                                </p>
                                <?}?>
                            <!-- do child second -->
                            <? for ($j=1; $j<=$booking_info->noch; $j++){?>
                                <p class="alt">
                                    <span class="traveler_index">
                                        <label class="required" for="traveler_firstname<?=$i;?>>" style="background: none;">
                                            <em>*</em> Traveler <?=$i+$j;?> (Child)
                                        </label>                                        
                                    </span>
                                    <select name="c_title[]" id="c_title<?=$i;?>" class="traveler_title">                                    
                                        <option value="Mr">Mr</option>                                   
                                        <option value="Mrs">Mrs</option>                           
                                        <option value="Ms">Ms</option>                              
                                        <option value="Miss">Miss</option>                                
                                        <option value="Mstr">Mstr</option>                            
                                    </select>
                                    <input type="text"  name="c_firstName[]" maxlength="30" class="traveler_firstname" id="c_firstName<?=$i;?>" value="" style="width: 185px;" />
                                    <input type="text"  name="c_lastName[]" maxlength="30" class="traveler_firstname pad_text_left" id="c_lastName<?=$i;?>" value="" />
                                </p>
                                <?}?>        
                        </div><!-- end of traveler_list -->
                    </div><!-- end of traveler_details -->

                    <!--CONTACT DETAILS-->
                    <div class="contact_details">
                        <h2>Contact details</h2>
                        <p style="margin-top: 5px;">
                            <label class="email_address required" for="email_address"><em>*</em> Email</label>
                            <input type="text" value="" name="email" class="email_address iconemail" id="email_address" style="width: 189px;">
                            <label class="verify_email_address required " for="verify_email_address"><em>*</em> Verify email</label>
                            <input type="text" value="" name="email1" class="verify_email_address pad_text_left" id="verify_email_address" style="width: 188px;">
                        </p>

                        <!--NOTE BOX-->
                        <div class="note_box">
                            <div class="note_body">

                                <div class="right_note">
                                    <ul>
                                        <li style="color: #848484;">
                                            We will never sell, share or distribute your personal information.
                                        </li>
                                    </ul>
                                </div>
                                <div class="left_note">
                                    <strong class="note_title">Please note</strong>
                                </div>
                                <br class="clearing" /> 
                            </div>
                        </div>

                    </div>

                    <!--BOOK NOW-->
                    <div style="float: right; margin: 20px 0 0 0">
                        <div class="atlas_btn_big" style="margin-right:0;">

                            <input type="submit" value="Book Now" id="book_now">

                        </div>

                    </div>

                    <br class="clearing" /> 

                </div>

            </div>

            <br class="clearing">

        </form>

    </div>

</div>
<script type="text/javascript">

    /***********************************************************
    * CUSTOMER BOOKING - EXCURSION BOOKING
    ***********************************************************/

    $('#customer').live('submit',function(){ 

            // Override default error message
            jQuery.validator.messages.required = "";

            // Override generation of error label 
            $("#customer").validate({
                    rules: {
                        "a_firstName[]": "required",
                        email: {
                            required: true, 
                            email: true 
                        },
                        email1: {
                            required: true,
                            equalTo: "#email_address"
                        }
                    },
                    errorPlacement: function(error, element){}
            });

            var is_valid_form = $("#customer").valid();
            if(is_valid_form==false) return false;

    })
</script>